<template>
    <div>
        <el-button type="danger" @click="showEdit('add')">新增分类</el-button>
        <Table :columns="columns" :showPagination="false" :dataSource="tableData" :fetch="loadDataList"
            :options="tableOptions">
            <template #cover="{ index, row }">
                <Cover :cover="row.cover"></Cover>
            </template>
            <template #op="{ index, row }">
                <div class="op">
                    <a href="javascript:void(0)" class="a-link" @click="showEdit('update', row)">修改</a>
                    <el-divider direction="vertical" />
                    <a href="javascript:void(0)" class="a-link" @click="del(row)">删除</a>
                    <el-divider direction="vertical" />
                    <a href="javascript:void(0)" :class="[index==0 ? 'not-allow' : 'a-link']" @click="changeSort(index,'up')">上移</a>
                    <el-divider direction="vertical" />
                    <a href="javascript:void(0)"  :class="[index==tableData.list.length-1 ? 'not-allow' : 'a-link']" @click="changeSort(index,'down')">下移</a>
                </div>

            </template>
        </Table>
        <!-- <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" @close="dialogConfig.show=false">
            <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="100px">
                <el-form-item prop="categoryName" label="名称">
                    <el-input  placeholder="请输入名称"  v-model="formData.categoryName" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="cover" label="封面">
                    <el-input v-model="formData.cover">
                    </el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="formData.cover" type="textarea" :autoSize="{minRows:4,maxRows:4}">
                    </el-input>
                </el-form-item>
            </el-form>
        </Dialog> -->

        <!--新增类目-->
        <el-dialog v-model="dialogVisible" title="新增类目" width="30%" :before-close="handleClose" :draggable="true"
            :close-on-click-modal="false">
            <span></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-form :model="formDataAdd" :rules="rules" ref="formDataRef" label-width="100px">
                        <el-form-item prop="categoryName" label="名称">
                            <el-input placeholder="请输入名称" v-model="formDataAdd.categoryName">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="cover" label="封面">
                            <CoverUpload v-model="formDataAdd.cover"></CoverUpload>
                        </el-form-item>
                        <el-form-item label="简介" prop="categoryDesc">
                            <el-input type="textarea" placeholder="请输入简介" v-model="formDataAdd.categoryDesc"
                                :autoSize="{ minRows: 4, maxRows: 4 }">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(false)">
                        确定
                    </el-button>

                </span>

            </template>

        </el-dialog>

        <!--编辑类目-->
        <el-dialog v-model="dialogVisibleEdit" title="编辑" width="30%" :before-close="handleClose" :draggable="true"
            :close-on-click-modal="false">
            <span></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-form :model="formDataEdit" :rules="rules" ref="formDataRef" label-width="100px">
                        <el-form-item prop="categoryName" label="名称">
                            <el-input placeholder="请输入名称" v-model="formDataEdit.categoryName">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="cover" label="封面">
                            <CoverUpload v-model="formDataEdit.cover"></CoverUpload>
                        </el-form-item>
                        <el-form-item label="简介" prop="categoryDesc">
                            <el-input type="textarea" v-model="formDataEdit.categoryDesc"
                                :autoSize="{ minRows: 4, maxRows: 4 }">
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(true)">
                        确定
                    </el-button>

                </span>

            </template>

        </el-dialog>

    </div>
</template>
    
<script setup>
import { getCurrentInstance, nextTick, reactive } from 'vue';
import { ElMessageBox } from 'element-plus'
import { ref } from 'vue';
const dialogVisible = ref(false)
const dialogVisibleEdit = ref(false)
const { proxy } = getCurrentInstance();
//新增
const handleClose = (done) => {
    ElMessageBox.confirm('确定关闭?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const openDialog = () => {
    dialogVisible.value = true
}

const closeDialog = () => {
    dialogVisible.value = false
}

const confirmDialog = () => {
    dialogVisible.value = false
}

const columns = [
    {
        label: "封面",
        prop: "cover",
        width: 100,
        scopedSlots: "cover"
    },
    {
        label: "名称",
        prop: "categoryName",
        width: 150,
    },
    {
        label: "简介",
        prop: "categoryDesc",
    },
    {
        label: "博客数量",
        prop: "blogCount",
        width: 100,
    },
    {
        label: "操作",
        prop: "op",
        width: 200,
        scopedSlots: "op"
    }
]

const tableData = reactive({});

const tableOptions = {
    extHeight: 10,
}
const api = {
    "loadDataList": "/category/loadAllCategory4Blog",
    "savaCategory": "/category/saveCategory4Blog",
    "delete": "/category/delCategory4Blog",
    "move":"/category/changeCategorySort4Blog"
}
const loadDataList = async () => {
    let result = await proxy.Request({
        url: api.loadDataList
    })
    if (!result) {
        return;
    }
    tableData.list = result.data
}
const formDataAdd = reactive({})
const formDataEdit = reactive({});
const dialogConfig = reactive({
    show: false,
    title: "新增分类",
    buttons: [
        {
            type: "primary",
            text: "确定",

        }
    ]
})

const dialogConfigEdit = reactive({
    show: false,
    title: "编辑",
    buttons: [
        {
            type: "primary",
            text: "确定",
            // click: (e) => {
            //     console.log("aaaas")
            //     submitForm(formDataEdit);
            // }
        }
    ]
})




const rules = {
    categoryName: [{
        required: true,
        message: "请输入分类名称"
    }]
}
const formDataRef = ref();
const showEdit = (type, data) => {

    // dialogConfig.show = true
    nextTick(() => {
        if (type == "add") {
            dialogConfig.title = "新增分类"
            dialogVisible.value = true
            Object.assign(formDataAdd, data);
        }
        else if (type == "update") {
            dialogVisibleEdit.value = true
            Object.assign(formDataEdit, data)
        }
    })

}

const submitForm = async (isEditing) => {

    const formData = isEditing ? formDataEdit : formDataAdd; // 根据操作类型确定使用哪个表单数据
    formDataRef.value.validate(async (valid) => {
        if (!valid) return;

        let params = {
            categoryId: formData.categoryId,
            categoryName: formData.categoryName,
            cover: formData.cover,
            categoryDesc: formData.categoryDesc
        }
        Object.assign(params, formData);
        let result = await proxy.Request({
            url: api.savaCategory,
            params: params,
        });
        console.log(params)
        if (!result) return;

        dialogVisible.value = false;
        dialogVisibleEdit.value = false
        proxy.Message.success("保存成功");
        loadDataList();
    });
}

//删除
const del = (data) => {
    let name = data.categoryName;
    proxy.Confirm('你确定要删除' + name, async () => {
        let params = {
            "categoryId": data.categoryId,
        }
        // Object.assign(params, formData);
        let result = await proxy.Request({
            url: api.delete,
            params: params,
        });
        if (!result) return;
        proxy.Message.success("删除成功");
        loadDataList();   
    })
}


//修改排序
const changeSort =async (index,type)=>{
    let categoryList = tableData.list
    if(type=="down" && index==categoryList.length-1 || type=="up"&& index==0) {
        return;
    }

    let number = type == "down" ? 1:-1;
    let temp = categoryList[index];

    categoryList.splice(index,1);
    categoryList.splice(index+number,0,temp);
        // Object.assign(params, formData);
        let result =await proxy.Request({
            url: api.move,
            datatype:"json",
            params: categoryList,
        });
        if (!result) return;
        proxy.Message.success("重新排序成功");
        loadDataList();   

}
</script>
<style>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>